<template>
  <div class="app-container">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="未处理" name="0"/>
      <el-tab-pane label="上门中" name="1"/>
      <el-tab-pane label="已完成" name="2"/>
      <el-tab-pane label="已删除" name="3"/>
    </el-tabs>
    <div v-if="!isShowDetail">
      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item label="所属小区" prop="estateId">
          <el-select v-model="queryParams.estateId" placeholder="请选择小区" size="mini" filterable clearable>
            <el-option v-for="estate in estatesOptions"
                       :key="estate.id"
                       :label="estate.estateName"
                       :value="estate.id"/>
          </el-select>
        </el-form-item>
        <el-form-item label="户号" prop="roomNo">
          <el-input v-model="queryParams.roomNo" placeholder="请输入户号" clearable size="mini"
                    @keyup.enter.native="handleQuery"/>
        </el-form-item>
        <el-form-item label="发布时间" prop="createTime">
          <el-date-picker v-model="dateRange" clearable size="mini" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
                          range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd"
            v-hasPermi="['module:repairrecord:add']">新增</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="success" icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
            v-hasPermi="['module:repairrecord:edit']">修改</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="danger" icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
            v-hasPermi="['module:repairrecord:remove']">删除</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="warning" icon="el-icon-download" size="mini" :loading="exportLoading" @click="handleExport"
            v-hasPermi="['module:repairrecord:export']">导出</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddPiliang"
                     v-hasPermi="['module:repairrecord:addPiliang']">批量新增</el-button>
        </el-col>
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>

      <el-table v-loading="loading" :data="recordList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="所属小区" align="center" prop="estateName" width="150"/>
        <el-table-column label="报修人员" align="center" prop="nickName" width="150"/>
        <el-table-column label="报修位置" align="center" prop="roomNo" width="150"/>
        <el-table-column label="联系方式" align="center" prop="phoneNum" width="150"/>
        <el-table-column label="问题描述" align="center" prop="content" width="150" :show-overflow-tooltip="true"/>
<!--        <el-table-column label="业主图片" align="center">-->
<!--          <template slot-scope="scope">-->
<!--            <el-image v-if="scope.row.imgUrlList!==undefined && scope.row.imgUrlList!== null && scope.row.imgUrlList.length > 0"-->
<!--                      style="width: 60px; height: 60px" fit="cover"-->
<!--                      :src="scope.row.imgUrlList[0]"-->
<!--                      :preview-src-list="scope.row.imgUrlList">-->
<!--            </el-image>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column label="状态" align="center" width="100">-->
<!--  &lt;!&ndash;        状态 0 - 未处理  1 - 师傅上门中  2 - 处理完成&ndash;&gt;-->
<!--          <template slot-scope="scope">-->
<!--            <div>-->
<!--              <el-tag v-if="scope.row.state === 0" style="cursor: pointer" :type="'danger'">未处理</el-tag>-->
<!--              <el-tag v-else-if="scope.row.state === 1" style="cursor: pointer" :type="'warning'">师傅上门中</el-tag>-->
<!--              <el-tag v-else style="cursor: pointer" :type=" 'success' ">处理完成</el-tag>-->
<!--            </div>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column label="报事类型" align="center" width="100">-->
<!--          <template slot-scope="scope">-->
<!--            <div>-->
<!--              <el-tag v-if="scope.row.checkType === 0" style="cursor: pointer" :type="'danger'">公共报修</el-tag>-->
<!--              <el-tag v-else-if="scope.row.checkType === 1" style="cursor: pointer" :type="'warning'">有偿报修</el-tag>-->
<!--            </div>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column label="修理人员" align="center" prop="opUserName" />
        <el-table-column label="处理状态" align="center" prop="opState">
          <template slot-scope="scope">
            <div>
              <el-tag v-if="scope.row.opState === 0" style="cursor: pointer" :type="'danger'">未处理</el-tag>
              <el-tag v-else-if="scope.row.opState === 1" style="cursor: pointer" :type="'warning'">处理中</el-tag>
              <el-tag v-else style="cursor: pointer" :type=" 'success' ">处理完成</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="报修时间" align="center" prop="createTime" />
<!--        <el-table-column label="完工图片" align="center">-->
<!--          <template slot-scope="scope">-->
<!--            <el-image v-if="scope.row.opImgUrlList!==undefined && scope.row.opImgUrlList!== null && scope.row.opImgUrlList.length > 0"-->
<!--                      style="width: 60px; height: 60px" fit="cover"-->
<!--                      :src="scope.row.opImgUrlList[0]"-->
<!--                      :preview-src-list="scope.row.opImgUrlList">-->
<!--            </el-image>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column label="操作" align="center" width="250px" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleShowDetail(scope.row)"
                       v-hasPermi="['module:repairrecord:edit']">详情</el-button>
<!--            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"-->
<!--              v-hasPermi="['module:repairrecord:edit']">安排师傅上门</el-button>-->
<!--            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleResult(scope.row)"-->
<!--                       v-hasPermi="['module:repairrecord:edit']">完工评价</el-button>-->
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList" />

    </div>

    <el-dialog :title="title" :visible.sync="isShowDetail" width="1200px" append-to-body >
      <!-- 添加或修改对话框 -->
        <el-form ref="form" :model="form" :rules="rules" label-width="140px">
          <el-row>
            <el-col :span="8">
              <el-form-item label="所属小区：" prop="estateName">{{form.estateName}}</el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="上报人昵称：" prop="nickName">{{form.nickName}}</el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="上报时间：" prop="createTime">{{form.createTime}}</el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="业主楼号户号：" prop="roomNo">{{form.roomNo}}</el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="业主手机号：" prop="phoneNum">{{form.phoneNum}}</el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="状态：" prop="state">
                <div v-if="form.state == 0">待处理</div>
                <div v-if="form.state == 1">维修师父上门处理中</div>
                <div v-if="form.state == 2">处理完成</div>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="业主描述：">{{form.content}}</el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="业主上传图片：" prop="imgUrlList">
                <el-image v-for="img in form.imgUrlList" style="width: 60px; height: 60px" :src="img" :preview-src-list="[form.imgUrlList]"/>
              </el-form-item>
            </el-col>
            <el-col v-if="form.state > 0">
              <el-col :span="24">
                <el-form-item label="上门修理人员：" prop="opUserName">
                  <el-input v-model="form.opUserName" placeholder="请输入上门修理人员" size="mini"/>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="维修人员手机号：" prop="opWorkerPhone">
                  <el-input v-model="form.opWorkerPhone" placeholder="请输入维修人员手机号" size="mini"/>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="修理状态：" prop="opState">
                  <div v-if="form.opState == 0">待处理</div>
                  <div v-if="form.opState == 1">修理中</div>
                  <div v-if="form.opState == 2">修理完成</div>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="修理上传图片：" prop="imgUrl">
                  <a :href="item" v-for="(item,index) in form.opImgUrlList">
                    <el-image  style="width: 240px; height: 240px" :src="item" :preview-src-list="[form.opImgUrlList]" />
                  </a>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="修理反馈：" prop="opResult">
                  <el-input v-model="form.opResult" placeholder="请输入修理反馈" size="mini"/>
                </el-form-item>
              </el-col>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align: center;">
<!--          <el-button :loading="buttonLoading" size="mini" type="primary" @click="handleShowUser(form)">安排师傅上门</el-button>-->
<!--          <el-button :loading="buttonLoading" size="mini" type="primary" @click="submitForm">确 定</el-button>-->
          <el-button @click="quxiao" size="mini">取 消</el-button>
        </div>
    </el-dialog>



    <!-- 设置上门师傅 -->
    <el-dialog :title="title" :visible.sync="open" width="400px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="维修人员" prop="opWorkerId">
          <el-select v-model="form.opWorkerId" placeholder="请选择维修人员" size="mini">
            <el-option v-for="worker in workerOptions"
                       :key="worker.id"
                       :label="worker.nickName + '('+ worker.phoneNum +')'"
                       :value="worker.id"/>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="buttonLoading" type="primary" size="mini" @click="submitForm">确 定</el-button>
        <el-button @click="cancel()" size="mini">取 消</el-button>
      </div>
    </el-dialog>


    <!-- 添加或修改报修对话框 -->
    <el-dialog :title="titleResult" :visible.sync="openResult" width="650px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="所属物业" prop="propertyId">
          <el-select v-model="form.propertyId" placeholder="请选择"  size="mini" style="width:100%;">
            <el-option v-for="property in propertyListOptions"
                       :key="property.id"
                       :label="property.propertyName"
                       :value="property.id"/>
          </el-select>
        </el-form-item>
        <el-form-item label="所属小区" prop="estateId">
          <el-select v-model="form.estateId" placeholder="请选择"  size="mini" style="width:100%;">
            <el-option v-for="estate in estatesOptions"
                       :key="estate.id"
                       :label="estate.estateName"
                       :value="estate.id"/>
          </el-select>
        </el-form-item>
        <el-form-item label="报修住户" prop="roomNo">
          <el-input type="" v-model="form.roomNo" placeholder="请输入报修住户" rows="3" size="mini"/>
        </el-form-item>
        <el-form-item label="问题信息" prop="opWorkerId">
          <el-input type="textarea" v-model="form.content" placeholder="请输入问题信息" rows="3" size="mini"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="buttonLoading" size="mini" type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="openResult = false" size="mini">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 批量添加报修对话框 -->
    <el-dialog :title="titlePiliang" :visible.sync="openPiliang" width="650px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="所属物业" prop="propertyId">
          <el-select v-model="form.propertyId" placeholder="请选择"  size="mini" style="width:100%;">
            <el-option v-for="property in propertyListOptions"
                       :key="property.id"
                       :label="property.propertyName"
                       :value="property.id"/>
          </el-select>
        </el-form-item>
        <el-form-item label="报修住户" prop="roomNo">
          <el-input type="" v-model="form.roomNo" placeholder="请输入报修住户" rows="3" size="mini"/>
        </el-form-item>
        <el-form-item label="问题信息" prop="opWorkerId">
          <el-input type="textarea" v-model="form.content" placeholder="请输入问题信息" rows="3" size="mini"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="buttonLoading" size="mini" type="primary" @click="submitPiliangForm">确 定</el-button>
        <el-button @click="openPiliang = false" size="mini">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listRecord, getRecord, delRecord, addRecord, updateRecord, exportRecord } from "@/api/module/repairRecord";

import { listByEstate } from "@/api/module/estate/user";
import { listAllEstate } from "@/api/module/estate/estate";
import {listProperty, listPropertyNoPage} from "@/api/module/property/property";
import {addPiliang} from "../../../api/module/repairRecord";

export default {
  name: "Record",
  data() {
    return {
      activeName:'0',
      isShowDetail:false,
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 报修表格数据
      recordList: [],
      estatesOptions: [],
      propertyListOptions: [],
      workerOptions: [],
      // 弹出层标题
      title: "",
      titleResult:'',
      titlePiliang:'',
      // 是否显示弹出层
      open: false,
      openResult: false,
      openPiliang:false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        estateId: undefined,
        state:0,
        // recordType:0,
      },
      // 查询参数
      queryParamsUser: {
        pageNum: 1,
        pageSize: 10,
        estateId: undefined,
        userType:3,
        isManager:0,
      },
      dateRange:[],
      // 表单参数
      form: {},
      // 表单校验
      rules: { }
    };
  },
  created() {
    this.getList();
    this.getEstateList();
    this.getPropertyList();
  },
  methods: {
    /** 查询报修列表 */
    getList() {
      this.loading = true;
      listRecord(this.queryParams).then(response => {
        this.recordList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    handleClick(val){
      console.log('handleClick',val.name);
      this.activeName = val.name;
      this.queryParams.state = parseInt(val.name);
      this.getList();
    },
    getEstateList() {
      listAllEstate().then(response => {
        this.estatesOptions = response.data;
      });
    },
    getPropertyList() {
      listPropertyNoPage().then(response => {
        this.propertyListOptions = response.data;
      });
    },
    quxiao(){
      this.isShowDetail = false
      this.reset();
    },
    getWorkerList(estateId) {
      this.queryParamsUser.estateId = estateId;
      listByEstate(this.queryParamsUser).then(response => {
        this.workerOptions = response.data;
      });
    },
    chooseImg(){
      console.log("repairRecord chooseImg",data);
      this.form.opImgUrl = "";
      var imgUrlArray = data.imgUrl;
      for(var index in imgUrlArray){
        this.form.opImgUrl += imgUrlArray[index].name + ",";
        this.form.opImgUrlPath += imgUrlArray[index].url + ",";
      }
      this.form.opImgUrl = this.form.opImgUrl.substring(0,this.form.opImgUrl.length - 1);
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        estateId: undefined,
        userId: undefined,
        roomNo: undefined,
        phoneNum: undefined,
        createTime: undefined,
        content: undefined,
        imgUrl: undefined,
        state: undefined,
        checkType: undefined,
        opWorkerId: undefined,
        opWorkerPhone: undefined,
        opUserName: undefined,
        opState: undefined,
        opResult: undefined,
        opImgUrl: undefined,
        opImgUrlPath: undefined,
        imgUrlList:[],
        opImgUrlList:[],
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      if(this.dateRange !=undefined && this.dateRange.length === 2){
        this.queryParams.beginDate = this.dateRange[0];
        this.queryParams.endDate = this.dateRange[1]
      }
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id);
      this.single = selection.length!==1;
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.openResult = true;
      this.title = "添加报修";
    },

    handleAddPiliang() {
      this.reset();
      this.openPiliang = true;
      this.titlePiliang = "批量添加报修";
    },
    handleShowDetail(row) {
      // this.queryParams.estateId = row.estateId;
      // this.getWorkerList(row.estateId);
      this.loading = true;
      this.reset();
      const id = row.id || this.ids;
      getRecord(id).then(response => {
        this.loading = false;
        this.form = response.data;
        console.log(this.form)
        this.isShowDetail = true;
      });
    },
    /** 修改按钮操作 */
    handleShowUser(row) {
      // this.loading = true;
      // this.reset();
      const id = row.id || this.ids;
      // getRecord(id).then(response => {
      //   this.loading = false;
      //   this.form = response.data;
      // });
      this.open = true;
      this.title = "安排师父上门";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.queryParams.estateId = row.estateId;
      this.getWorkerList(row.estateId);
      this.loading = true;
      this.reset();
      const id = row.id || this.ids;
      getRecord(id).then(response => {
        this.loading = false;
        this.form = response.data;
        this.open = true;
        this.title = "安排师父上门";
      });
    },
    handleResult(row){
      this.queryParams.estateId = row.estateId;
      this.getWorkerList(row.estateId);
      this.loading = true;
      this.reset();
      const id = row.id || this.ids;
      getRecord(id).then(response => {
        this.loading = false;
        this.form = response.data;
        this.openResult = true;
        this.titleResult = "上传报修结果";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.buttonLoading = true;
          if (this.form.id != null) {
            updateRecord(this.form).then(response => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            }).finally(() => {
              this.buttonLoading = false;
            });
          } else {
            addRecord(this.form).then(response => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            }).finally(() => {
              this.buttonLoading = false;
            });
          }
        }
      });
    },

    submitPiliangForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.buttonLoading = true;
            addPiliang(this.form).then(response => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            }).finally(() => {
              this.buttonLoading = false;
            });
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$confirm('是否确认删除报修编号为"' + ids + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.loading = true;
          return delRecord(ids);
        }).then(() => {
          this.loading = false;
          this.getList();
          this.msgSuccess("删除成功");
        }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      queryParams.state = this.activeName;
      if(this.dateRange !=undefined && this.dateRange.length === 2){
        queryParams.beginDate = this.dateRange[0];
        queryParams.endDate = this.dateRange[1]
      }
      this.$confirm('是否确认导出所有报修数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.exportLoading = true;
          return exportRecord(queryParams);
        }).then(response => {
          this.download(response.msg);
          this.exportLoading = false;
        }).catch(() => {});
    }
  }
};
</script>
